<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>会员登录</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/login.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .sb-btn {
            width: 100%;
            display: block;
            border: none;
            background: #eee;
            color: #fff;
            height: 40px;
            line-height: 42px;
            border-radius: 100px;
            background: #2b58a7;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 50px;
            box-shadow: 0 0 5px #3f5f96;
        }
        .sb-btn:active {
            background: #2e61bb;
        }
    </style>
</head>

<body>
    <header>
        <div class="img"></div>
    </header>
    <div class="wrapper by_password">
        <div class="nav-container">
            <ul class="nav">
                <li>
                    <div class="opt-password active">密码登录</div>
                </li>
                <li>
                    <div class="opt-text">短信登录</div>
                </li>
            </ul>
        </div>
        <div class="form-container">
            <form>
                <div class="cell phone-cell">
                    <input class="c_inp phone-number" type="text" placeholder="手机号码" name="" id="">
                    <div class="b-line"></div>
                </div>
                <div class="cell password-cell">
                    <input class="c_inp password" type="password" placeholder="密码" name="" id="">
                    <div class="b-line"></div>
                </div>
                <input type="button" class="sb-btn" value="登录">
            </form>
        </div>

        <div class="register-container">
            <div><a class="forgetPassword" href="resetpassword.html">忘记密码</a></div>
            <div><span>没有账号，</span><a href="signin.html">立即注册</a></div>
        </div>

    </div>
    <div class="waraper by_text">
        <div class="nav-container">
            <ul class="nav">
                <li>
                    <div class="opt-password">密码登录</div>
                </li>
                <li>
                    <div class="opt-text active">短信登录</div>
                </li>
            </ul>
        </div>
        <div class="form-container">
            <form>
                <div class="cell phone-cell">
                    <input class="c_inp phone-number" type="text" placeholder="手机号码">
                    <div class="b-line"></div>
                </div>
                <div class="cell password-cell text-code smsSeed">
                    <input class="c_inp password" type="text" placeholder="短信登录">
                    <div class="b-line"></div>
                </div>
                <input type="button" class="sb-btn" value="登录">
            </form>
        </div>
        <div class="register-container by_text">
            <div class="reg"><span>没有账号，</span><a href="signin.html">立即注册</a></div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".text-code").attr("data-text", "短信验证码");
            $(".opt-text").click(function (ev) {
                $(".by_password").hide();
                $(".by_text").show();
                console.log($("text-code").children);
            });
            $(".opt-password").click(function (ev) {
                $(".by_password").show();
                $(".by_text").hide();
            });
            $("[data-text]").click(function () {
                console.log('发送验证码');
            })
            //清空电话
            $(".phone-cell").click(function (ev) {
                if (ev.target.className.indexOf('phone-cell') !== -1) {
                    console.log(ev.target.children);
                    console.log('电话号码已清空');
                    ev.target.children[0].value = "";
                }
            })
            //密码显示与隐藏
            $(".password-cell").click(function (ev) {
                if (ev.target.className.indexOf('password-cell') !== -1) {
                    var that = $(this);
                    var inp = that.find('input');
                    var type = inp.prop("type");
                    inp.prop("type", type === "text" ? 'password' : 'text');

                }
            })
            $('.smsSeed').on('click', function() {
                
            });
        });
    </script>
</body>

</html>